<template>
  <div class="asideBox flex-1 flex flex-direction">
    <div class="posit">
      <div class="return">
        <input
          type="text"
          class="return-text"
          placeholder="请输入关键词搜索"
          v-model="inputVal"
          value=""
        />
      </div>
    </div>
    <aside>
      <ul class="asideMenu" ref="myElement">
        <li v-for="(item, index) in menuItem" :key="index">
          <div class="oneMenu" @click="showToggle(item, index)">
            <span>{{ item.title }}</span>
            <i :class="['iconfont icon-xiangyouxiayiye', item.isSubShow ? 'active' : '']"></i>
          </div>
          <!-- <ul class="ulZj" :style="item.isSubShow ? 'height:auto;display: block;' : 'height:0;display: none;'"> -->
          <ul class="ulZj" v-show="item.isSubShow">
            <li
              :class="['', themIndex === subItem.id ? 'active' : '']"
              v-for="(subItem, idx) in item.subItems"
              :key="idx"
              :id="'item-' + subItem.path"
              @click="gotoChat(subItem)"
            >
              <div class="oneMenuChild">
                <img :src="getAvatar(subItem.image)" />
                <h6>{{ subItem.name }}</h6>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </aside>
  </div>
</template>
  
<script>
import { getFileAccessHttpUrl, getAction } from '@/api/manage'
export default {
  name: 'TopNav',
  mixins: [],
  components: {},
  props: {
    returnPath: {
      type: String,
      default: '',
    },
    screenHeightBg: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      inputVal:'',
      themIndex: '1',
      menuTitleData: '',
      menuItem: [
        {
          title: '电商运营',
          icon: 'iconfont icon-xiangyouxiayiye',
          isSubShow: true,
          subItems: [
            {
              img: require('@assets/chat/wenan.png'),
              title: '电商商品详情文案',
              path: 'CommerceProducts',
            },
            {
              img: require('@assets/chat/taocan.png'),
              title: '团购套餐介绍',
              path: 'GroupBuying',
            },
            {
              img: require('@assets/chat/zitibiaoti.png'),
              title: '商品标题生成',
              path: 'ProductTitle',
            },
            {
              img: require('@assets/chat/pinglun.png'),
              title: '商品好评',
              path: 'ProductPositive',
            },
            {
              img: require('@assets/chat/duiihua.png'),
              title: '虚拟购买评论',
              path: 'VirtualPurchase',
            },
            {
              img: require('@assets/chat/zhuanha.png'),
              title: '差评转化',
              path: 'NegativeReview',
            },
            {
              img: require('@assets/chat/pinglun.png'),
              title: '大众点评/美团探店点评',
              path: 'StoreReviews',
            },
          ],
        },
        {
          title: '职场必备',
          icon: 'iconfont icon-xiangyouxiayiye',
          isSubShow: true,
          subItems: [
            {
              img: require('@assets/chat/gongzuojihua.png'),
              title: '工作计划',
              path: 'WorkPlan',
            },
            {
              img: require('@assets/chat/zongjiebao.png'),
              title: '总结报告',
              path: 'WorkPlanReprt',
            },
            {
              img: require('@assets/chat/zhou.png'),
              title: '日报&周报',
              path: 'DailyWeekly',
            },
            {
              img: require('@assets/chat/hetongqianding.png'),
              title: '生成合同',
              path: 'ConTract',
            },
            {
              img: require('@assets/chat/youjian.png'),
              title: '电子邮件生成器',
              path: 'EmailGenerator',
            },
            // {
            //   img: require('@assets/chat/zhongyinfanyi.png'),
            //   title: '翻译',
            //   path: 'TransLate',
            // },
          ],
        },
        {
          title: '文学',
          icon: 'iconfont icon-xiangyouxiayiye',
          isSubShow: true,
          subItems: [
            {
              img: require('@assets/chat/zitibiaoti.png'),
              title: '学生作文',
              path: 'StudentComposition',
            },
            {
              img: require('@assets/chat/caogao.png'),
              title: '学术文章',
              path: 'AcademicArticles',
            },
            {
              img: require('@assets/chat/linggan.png'),
              title: '创意故事',
              path: 'CreativeStory',
            },
            {
              img: require('@assets/chat/citie.png'),
              title: '人物塑造',
              path: 'CharacTerization',
            },
            {
              img: require('@assets/chat/zitibiaoti.png'),
              title: '赛博朋克鬼故事',
              path: 'GhostStory',
            },
            {
              img: require('@assets/chat/jiaoben.png'),
              title: '对联',
              path: 'AntitheticalCouplet',
            },
            {
              img: require('@assets/chat/jieshao.png'),
              title: '散文',
              path: 'ProseSe',
            },
            {
              img: require('@assets/chat/linggan.png'),
              title: '现代诗',
              path: 'ModernPoetry',
            },
          ],
        },
        {
          title: '网站',
          icon: 'iconfont icon-xiangyouxiayiye',
          isSubShow: true,
          subItems: [
            {
              img: require('@assets/chat/sousuo.png'),
              title: '网站首页SEO优化',
              path: 'SeoOptimization',
            },
            {
              img: require('@assets/chat/biaoti.png'),
              title: '网页大标题',
              path: 'WebPage',
            },
            {
              img: require('@assets/chat/qiye.png'),
              title: '公司背景',
              path: 'CompanyBackground',
            },
            {
              img: require('@assets/chat/hyaoz.png'),
              title: '产品核心价值',
              path: 'CoreValues',
            },
            {
              img: require('@assets/chat/hyaod.png'),
              title: '产品核心要点',
              path: 'CorePoints',
            },
            {
              img: require('@assets/chat/qiming.png'),
              title: '公司或产品起名',
              path: 'OrProduct',
            },
          ],
        },
        {
          title: '营销广告',
          icon: 'iconfont icon-xiangyouxiayiye',
          isSubShow: true,
          subItems: [
            {
              img: require('@assets/chat/zongjiebao.png'),
              title: '营销文案-引导下单',
              path: 'MarketingCopy',
            },
            {
              img: require('@assets/chat/miaoshu.png'),
              title: '广告描述',
              path: 'AdvertisingDescription',
            },
            {
              img: require('@assets/chat/biaoyu.png'),
              title: '广告标语',
              path: 'AdvertisingSlogan',
            },
          ],
        },
        {
          title: '教育(论文)',
          icon: 'iconfont icon-xiangyouxiayiye',
          isSubShow: true,
          subItems: [
            {
              img: require('@assets/chat/biaoti.png'),
              title: '文章主题及大纲',
              path: 'ArticleOutline',
            },
            {
              img: require('@assets/chat/xueke.png'),
              title: '学科出题',
              path: 'SubjectQuestions',
            },
            {
              img: require('@assets/chat/kaoyan.png'),
              title: '考研题目',
              path: 'PostgraduateQuestions',
            },
            {
              img: require('@assets/chat/gongzuojihua.png'),
              title: '学习计划',
              path: 'StudyPlan',
            },
            {
              img: require('@assets/chat/lunwen.png'),
              title: '论文大纲',
              path: 'PaperOutline',
            },
            {
              img: require('@assets/chat/zhaiyao.png'),
              title: '论文摘要',
              path: 'PaperAbstract',
            },
            {
              img: require('@assets/chat/biaoti.png'),
              title: '论文标题',
              path: 'PaperTitle',
            },
            {
              img: require('@assets/chat/biaoyu.png'),
              title: '雅思大作文',
              path: 'IeltsComposition',
            },
            {
              img: require('@assets/chat/linggan.png'),
              title: '学生会活动策划',
              path: 'EventPlanning',
            },
          ],
        },
        {
          title: '媒体写作',
          icon: 'iconfont icon-xiangyouxiayiye',
          isSubShow: true,
          subItems: [
            // {
            //   img: require('@assets/chat/update.png'),
            //   title: '自定义输入',
            //   path: 'CustomInput',
            // },
            // {
            //   img: require('@assets/chat/huihua.png'),
            //   title: 'AI绘画描述词',
            //   path: 'PaintingWords',
            // },
            {
              img: require('@assets/chat/biaoti.png'),
              title: '新媒体全文写作',
              path: 'NewMedia',
            },
            {
              img: require('@assets/chat/kuozhan.png'),
              title: '发言稿',
              path: 'SpeechManuscript',
            },
            // {
            //   img: require('@assets/chat/kuozhan.png'),
            //   title: '全文写作(步骤式)',
            //   path: 'TextWriting',
            // },
            // {
            //   img: require('@assets/chat/shex.png'),
            //   title: '短视频带货文案',
            //   path: 'VideoDeliveryCopy',
            // },
            // {
            //   img: require('@assets/chat/wenzhan.png'),
            //   title: '小红书笔记标题',
            //   path: '',
            // },
            // {
            //   img: require('@assets/chat/biaoti.png'),
            //   title: '新媒体文章标题',
            //   path: '',
            // },
            // {
            //   img: require('@assets/chat/xiaohong.png'),
            //   title: '小红书种草文案',
            //   path: '',
            // },
            // {
            //   img: require('@assets/chat/xiaohong.png'),
            //   title: '小红书旅游攻略',
            //   path: '',
            // },
            {
              img: require('@assets/chat/update.png'),
              title: '文章开头段',
              path: 'ArticleStart',
            },
            // {
            //   img: require('@assets/chat/biaoti.png'),
            //   title: '文章SEO优化',
            //   path: '',
            // },

            {
              img: require('@assets/chat/update.png'),
              title: '文章章节内容',
              path: 'ArticleChapter',
            },
            {
              img: require('@assets/chat/canguan.png'),
              title: '餐馆探店文案',
              path: 'ExploringStores',
            },
            {
              img: require('@assets/chat/fenjing.png'),
              title: '景点打卡文案',
              path: 'ClockIn',
            },
          ],
        },
        {
          title: '短视频',
          icon: 'iconfont icon-xiangyouxiayiye',
          isSubShow: true,
          subItems: [
            {
              img: require('@assets/chat/shex.png'),
              title: '短视频带货文案',
              path: 'DeliveryCopy',
            },
            {
              img: require('@assets/chat/zitibiaoti.png'),
              title: '抖音带货标题',
              path: 'ShippingTitle',
            },
            {
              img: require('@assets/chat/koubo.png'),
              title: '带货视频口播稿',
              path: 'OralDraft',
            },
            {
              img: require('@assets/chat/linggan.png'),
              title: '视频灵感',
              path: 'VideoInspiration',
            },
            {
              img: require('@assets/chat/citie.png'),
              title: '视频吸睛开头',
              path: 'VideoStart',
            },
            {
              img: require('@assets/chat/zitibiaoti.png'),
              title: '视频标题',
              path: 'VideoTitle',
            },
            {
              img: require('@assets/chat/jiaoben.png'),
              title: '短视频脚本大纲',
              path: 'VideoOutline',
            },
            {
              img: require('@assets/chat/jieshao.png'),
              title: '视频介绍',
              path: 'VideoIntroduce',
            },
            {
              img: require('@assets/chat/linggan.png'),
              title: '短视频分镜灵感',
              path: 'StoryboardInspiration',
            },
          ],
        },
      ],
    }
  },
  watch:{
        // 被侦听的变量count
        inputVal(){
          this.getSkillListModel()
        }
    },
  mounted() {
    this.getSkillListModel()
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    getAvatar(img) {
      return getFileAccessHttpUrl(img)
    },
    // 相同数据整合
    handlerDatas(arr) {
      const obj = {}
      arr.forEach((item, index) => {
        const { title } = item //解构赋值
        if (!obj[title]) {
          obj[title] = {
            title,
            isSubShow: true,
            subItems: [],
          }
        }
        obj[title].subItems.push(item)
      })
      const data = Object.values(obj) // 最终输出
      return data
    },

    getSkillListModel() {
      getAction('/skillmodel/api/listModel',{name:this.inputVal})
        .then((res) => {
          if(this.inputVal === ''){
            console.log('this.inputVal', this.inputVal)
            this.menuItem = this.handlerDatas(res.result)
            this.menuTitleData = this.menuItem[0].subItems[0]
            this.getSkillList()
          }else{
            console.log('12333333333333333333333333333333333')
            const data = this.handlerDatas(res.result)
            this.menuItem = data
          }

        })
        .catch((error) => {
          console.log('error', error)
          // 处理请求失败
        })
    },
    getSkillList() {
      getAction('/skillmodel/api/list', { typeId: this.themIndex })
        .then((res) => {
          this.$emit('changeCot', res.result, this.themIndex, this.menuTitleData)
        })
        .catch((error) => {
          console.log('error', error)
          // 处理请求失败
        })
    },
    gotoChat(item) {
      console.log('item', item)
      this.themIndex = item.id
      this.menuTitleData = item
      this.getSkillList()
    },
    // 点击展开折叠菜单事件
    showToggle(item, ind) {
      this.$set(this.menuItem[ind], 'isSubShow', !item.isSubShow)
      // this.menuItem.forEach((i) => {
      //   // 判断如果数据中的menuItem[i]的show属性不等于当前数据的isSubShow属性那么menuItem[i]等于false
      //   if (i.isSubShow !== this.menuItem[ind].isSubShow) {
      //     i.isSubShow = false //此处有可能不生效，数据变了，但是视图可能没更新，可以换成$set
      //     // this.$set(i,'isSubShow ',false)
      //   }
      // })
      // item.isSubShow = !item.isSubShow
      // this.$set(item, 'isSubShow ', !item.isSubShow)
      console.log(item.name)
    },
  },
}
</script>
  
  <style lang="less" scoped >
aside {
  overflow: hidden auto;
}
.asideBox {
  width: 100%;
}

.asideBox .asideMenu {
  margin: 0;
  padding: 0;
  li {
    list-style-type: none;
    padding: 8px 12px;
    span {
      font-size: 14px;
      color: #909399;
    }
    .oneMenu {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 20px;
      cursor: pointer;
      i {
        font-size: 12px;
        transition: all 0.3s;
        &.active {
          transform: rotate(90deg);
        }
      }
    }
    ul {
      margin: 0;
      padding: 0;
      margin-left: 5px;
      li {
        padding: 13px 10px;
        margin-bottom: 10px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        background: #f8f8f8;
        &.active {
          &::before {
            background-color: black;
            content: '';
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 2px;
          }
        }
      }
      .oneMenuChild {
        align-items: center;
        display: flex;
        overflow: hidden;
        position: relative;
        img {
          width: 28px;
          height: 28px;
        }
        h6 {
          color: black;
          margin: 0;
          margin-left: 10px;
          font-size: 14px;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}

.return{
  .return-text{
    border: none;
    background: #f8f8f8;
    padding: 10px 10px 10px 10px;
    width: 100%;
  }
  input:focus{
    outline:none;
  }
}

</style>
  